<template>
  <div class="app-container">
    <ul>
      <li>账户类型：<span>一类商户</span></li>
      <li>chatId：<span>{{ merchantDetail.merchantId }}</span></li>
      <li>偏移量：<span ref="copyRef">154154454546464448</span><span class="copy"><el-icon>
            <CopyDocument @click="copyTrackingNoFn"/>
          </el-icon></span></li>
      <li>商户账户余额：<span>{{ merchantDetail.withdrawalBalance }}</span></li>
      <li>商户编号：<span>{{ merchantDetail.userCode }}</span></li>
      <li>商户名称：<span>{{ merchantDetail.userName }}</span></li>
      <li>代收基础手续费：<span>{{ merchantDetail.freezeBalance }}</span></li>
      <li>代收手续费比率：<span>{{ merchantDetail.innerRate }}</span></li>
      <li>代收回调地址：<span></span></li>
      <li>代付回调地址：<span></span></li>
      <li>代付基础手续费：<span>{{ merchantDetail.useBalance }}</span></li>
      <li>代付手续费比率：<span>{{ merchantDetail.outerRate }}</span></li>
      <li>商户秘钥：<span ref="copyKeyRef">ca33d9852115156dabhugshj</span><span class="copy"><el-icon>
            <CopyDocument @click="copySecretKeyFn"/>
          </el-icon></span>
      </li>
      <li>商户状态：<span>正常</span></li>
    </ul>
  </div>
</template>

<script setup>
import { getRate } from '@/api/userManagement'
import { ElMessage } from 'element-plus'

const merchantDetail = ref({})
// 获取明细
function getDetail() {
  getRate().then(res => {
    merchantDetail.value = res.data
  })
}
const copyRef = ref()
// 复制
const copyTrackingNoFn = () => {
  let save = function (e) {
    e.clipboardData.setData('text/plain', copyRef.value.innerText)
    e.preventDefault()
  }
  document.addEventListener('copy', save)
  document.execCommand('copy')
  ElMessage({
    message: '复制成功',
    type: 'success'
  })
}
const copyKeyRef = ref()
// 复制
const copySecretKeyFn = () => {
  let save = function (e) {
    e.clipboardData.setData('text/plain', copyKeyRef.value.innerText)
    e.preventDefault()
  }
  document.addEventListener('copy', save)
  document.execCommand('copy')
  ElMessage({
    message: '复制成功',
    type: 'success'
  })
}
getDetail()
</script>

<style scoped>
li {
  list-style: none;
  color: #9dcced;
  line-height: 26px;
  font-size: 14px;
}

span {
  color: #389fe9;
}

.copy {
  margin-left: 5px;
  /* width: 12px;
  height: 12px;
  border: #389fe9 1px solid; */
  background-color: rgba(172, 218, 250, 0.5);
  border-radius: 5px;
  padding: 4px;
}
</style>
